<template>
  <div v-loading="pageLoading" :class="{'is-mobile': showMobilePage, 'mobile-detail-wrap': showMobilePage }" class="application-info-wrap">
    <SectionTitle title="申请信息" style="margin-bottom: 8px"/>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage ? 'left' : 'right'"
      label-width="130px"
      type="flex"
      class="application-form">
      <el-row :gutter="20" class="dividing">
        <el-col :span="12">
          <el-form-item label="申请人：">
            <CheckUserInfo v-if="invoiceDetail.proposer" :label="invoiceDetail.proposer" :user-id="invoiceDetail.proposerId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请部门：">
            <ToolTip :content="invoiceDetail.deptName" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开票审批：">
            <div v-if="invoiceDetail.approvalNo">
              <div style="color: #406eff; cursor: pointer" @click="goIssueInvoiceDetail">
                {{ invoiceDetail.approvalNo }}
              </div>
            </div>
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态：">
            <ToolTip
              :content="invoiceDetail.status | invoiceStatus"
              :class="`status-color-${invoiceDetail.status}`"
              placement="top-start"
              @click.native="goInvoiceAbandonDetail(invoiceDetail.status)"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务类型：">
            <ToolTip :content="invoiceDetail.businessType" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间：">
            <ToolTip :content="invoiceDetail.createTime" placement="top-start" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <SectionTitle title="发票信息" style="margin-top: 24px; margin-bottom: 8px"/>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage ? 'left' : 'right'"
      label-width="130px"
      class="application-form">
      <el-row :gutter="20" class="dividing">
        <el-col :span="12">
          <el-form-item label="发票号码：">
            <div class="flex-center">
              <ToolTip :content="invoiceDetail.number" placement="top-start" />
              <span v-if="hasRouteAuth('crm:receipt:invoiceEdit')" class="edit-btn" @click="openEdit(true, invoiceDetail.number)">编辑</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="含税金额(元)：">
            <div class="flex-center">
              <ToolTip :content="invoiceDetail.amount" placement="top-start" />
              <span v-if="hasRouteAuth('crm:receipt:invoiceEdit')" class="edit-btn" @click="openEdit(false, invoiceDetail.amount)">编辑</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开票人：">
            <CheckUserInfo v-if="invoiceDetail.issuer" :label="invoiceDetail.issuer" :user-id="invoiceDetail.issuerId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开票日期：">
            <ToolTip :content="invoiceDetail.issueTime" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发票类型：">
            <ToolTip :content="invoiceDetail.invoiceType" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开票项目：">
            <ToolTip :content="invoiceDetail.project" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纳税人名称：">
            <ToolTip :content="invoiceDetail.taxpayerName" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="我方抬头：">
            <ToolTip :content="invoiceDetail.ourTitle" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纳税人识别号：">
            <SecretText :log-text="getLogText('纳税人识别号')" :origin-text="invoiceDetail.taxpayerNum" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开票地址：">
            <SecretText :log-text="getLogText('开票地址')" :origin-text="invoiceDetail.invoiceAddress" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户行：">
            <ToolTip :content="invoiceDetail.openBank" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户账户：">
            <SecretText :log-text="getLogText('开户账户')" :origin-text="invoiceDetail.accountNum" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册电话：">
            <SecretText :log-text="getLogText('注册电话')" :origin-text="invoiceDetail.phone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="一般纳税人证明：">
            <FileShowList
              v-if="invoiceDetail.certificateFile && invoiceDetail.certificateFile.length"
              :file-list="invoiceDetail.certificateFile"
              style="max-width: 100%;"/>
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发票附件：">
            <FileShowList
              v-if="invoiceDetail.attachment && invoiceDetail.attachment.length"
              :file-list="invoiceDetail.attachment"
              style="max-width: 100%;"/>
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发票状态：">
            <ToolTip :content="getInvoiceState(invoiceDetail.invoiceState)" placement="top-start" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <editDialog ref="editDialog" @handelOk="editContent"/>
  </div>
</template>

<script>
import { invoiceDetail, invoiceInfoEdit } from '@/api/invoice';
import SectionTitle from '@/components/Title';
import FileShowList from '@/components/CreateOrder/fileShowList';
import editDialog from '../module/editDialog';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';
import math from '@/utils/math';
export default {
  name: 'InvoiceDetail',
  filters: {
    invoiceStatus(status) {
      return {
        0: '执行中',
        1: '已完成',
        2: '作废中',
        3: '已作废'
      }[status] || '--';
    }
  },
  components: {
    SectionTitle,
    FileShowList,
    editDialog
  },
  data() {
    return {
      pageLoading: false,
      invoiceDetail: {}
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.queryInvoiceDetail();
  },
  methods: {
    hasRouteAuth,
    getInvoiceState(status) {
      return {
        0: '正数正常',
        1: '正数作废',
        2: '负数正常',
        3: '负数作废'
      }[status];
    },
    openEdit(isEditNumber = true, content = '') {
      const title = isEditNumber ? '编辑发票号码' : '编辑含税金额';
      this.$refs.editDialog.openDialog({ content, title, isEditNumber });
    },
    editContent(data = {}) {
      const { id } = this.$route.params;
      invoiceInfoEdit(id, { type: data.isEditNumber ? 1 : 2, content: data.isEditNumber ? data.content : math.multiply(Number(data.content), 100) }).then(res => {
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.queryInvoiceDetail();
      }).catch(err => {
        console.log(err);
      });
    },
    queryInvoiceDetail() {
      this.pageLoading = true;
      const { id } = this.$route.params;
      if (!id) {
        this.$router.go(-1);
        this.$message.warning('无效id');
        return;
      }
      invoiceDetail(id).then(res => {
        this.pageLoading = false;
        if (res.code === 200) {
          this.invoiceDetail = res.data;
        }
      }).catch(_ => {
        this.pageLoading = false;
      });
    },
    goIssueInvoiceDetail() {
      const { applyId, processId } = this.invoiceDetail;
      const url = this.$router.resolve({
        name: 'issueInvoiceDetail',
        query: {
          issueId: applyId,
          processId: processId
        }
      });
      window.open(url.href, '_blank');
    },
    goInvoiceAbandonDetail(status) {
      // 仅作废中、已作废跳转
      if (status !== 2 && status !== 3) return;
      const { abandonId, abandonProcessId } = this.invoiceDetail;
      const url = this.$router.resolve({
        name: 'invoiceAbandonDetail',
        query: {
          id: abandonId,
          processId: abandonProcessId
        }
      });
      window.open(url.href, '_blank');
    },
    getLogText(label) {
      return `销项发票${this.invoiceDetail.number}的${label}`;
    }
  }
};
</script>

<style scoped lang="scss">
.application-info-wrap {
  margin:	16px 16px 0;
  padding: 16px 24px;
  background: #fff;
  min-height: calc(100vh - 64px);
  &.is-mobile {
    margin: 0;
    padding: 12px;
  }
  .application-form {
    & ::v-deep {
      .el-form-item {
        .el-form-item__label {
          font-size: 14px;
          color: #999 !important;
        }
      }
      .el-form-item__content {
        font-size: 14px;
        color: #333;
      }
    }
  }
  .dividing {
    &::v-deep {
      .el-col {
        height: 32px;
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:nth-child(2n) {
          .el-form-item__content {
            border-right: none;
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
  }
  .edit-btn {
    color: #406eff;
    cursor: pointer;
    margin-left: 12px;
  }
  .status-color-0, .status-color-1 {
    color: #333;
  }
  .status-color-2, .status-color-3  {
    color: #406eff;
    cursor: pointer;
  }
}
</style>
